Slack,ChatWork,Github,Backlogをまとめて管理『Franz』が便利すぎる
はじめに
アプリ開発・システム開発を行っていると、さまざまなウェブアプリやチャットツールを使うことが多いと思います。これらをひとつのアプリでまとめて閲覧・管理できるMacアプリがFranzです。
公開されているプラグインを入れたり、自分だけのプラグインを作ったりすることも簡単です。
実際にすずしゅんは、こんなかんじで利用しています。これだけまとめておくとめっちゃ便利です。
- プロジェクト管理ツール/Git
- Backlog
- Zube (おそらくズービって読む)
- Github
- チャットツール
- Slack複数PJ
- ChatWork
- GoogleApps系
- Google Calendar
- Gmail
- その他
- Soundcloud
更新履歴
- 2017/01/26 : KDDIChatWork, Backlogの通知ができるようにwebview.jsについてを追記
1. インストール
公式サイトからダウンロードしてインストール (記事執筆時は v4.0.4でした)
2. プラグイン追加
Githubからプラグインをダウンロードしてインストール
- optionキーを押しながらFinderの移動をタップするとライブラリが選択できます(ライブラリは隠しフォルダ)
- Finder > 移動 > ライブラリ > Application Support > Franz > Plugins
- 好みのプラグインをGithubからDLしてきてこのフォルダに展開
- Franzを再起動すると追加されています
3. 独自プラグイン作成
公開されてない場合は自分で作ればOK。Github用プラグインがシンプルなつくりなので雛形として作成するといいと思います。package.jsonを書き換えて、アイコン画像を用意すれば動くものができます。
基本的にはpackage.jsonを書き換えるだけでいいはずです。ログインするserviceURLやname, description, serviceNameを書き換えます。作成例を下記に紹介します。
ただし、通知をFranzのタブ上に表示したい場合は、加えて webview.js も更新してください。Franzのループで通知情報を取得して表示するしくみです。
package.json(soundcloud)
{
"name": "soundcloud",
"version": "1.0.0",
"description": "soundcloud",
"main": "index.js",
"author": "",
"license": "",
"config": {
"serviceURL": "https://soundcloud.com/signin",
"serviceName": "soundcloud",
"message": "",
"popup": [],
"hasNotificationSound": false,
"hasIndirectMessages": false,
"hasTeamID": false,
"customURL": false,
"hostedOnly": false,
"webviewOptions": {
"disablewebsecurity": ""
},
"openDevTools": false
}
}package.json(zube)
{
"name": "zube",
"version": "1.0.0",
"description": "zube",
"main": "index.js",
"author": "",
"license": "",
"config": {
"serviceURL": "https://zube.io/auth/github",
"serviceName": "zube",
"message": "",
"popup": [],
"hasNotificationSound": false,
"hasIndirectMessages": false,
"hasTeamID": false,
"customURL": false,
"hostedOnly": false,
"webviewOptions": {
"disablewebsecurity": ""
},
"openDevTools": false
}
}URLが可変する場合
- ウェブサイトによっては、serviceURLがプロジェクト名やチーム名で変わることがあります。その場合はteamIDを設定しておくと個別設定が可能です
- {teamID} で可変文字列, hasTeamID true にて個別設定ができます
package.json(Backlog)
{
"name": "Backlog",
"version": "1.0.0",
"description": "Backlog",
"main": "index.js",
"author": "",
"license": "",
"config": {
"serviceURL": "https://{teamID}.backlog.jp/LoginDisplay.action",
"serviceName": "Backlog",
"message": "",
"popup": [],
"hasNotificationSound": false,
"hasIndirectMessages": false,
"hasTeamID": true,
"customURL": false,
"hostedOnly": false,
"webviewOptions": {
"disablewebsecurity": ""
},
"openDevTools": false
}
}package.json(KDDI ChatWork)
{
"name": "KDDIChatWork",
"version": "1.0.0",
"description": "KDDIChatWork",
"main": "index.js",
"author": "",
"license": "",
"config": {
"serviceURL": "https://kcw.kddi.ne.jp/login.php?s={teamID}&args=",
"serviceName": "KDDIChatWork",
"message": "",
"popup": [],
"hasNotificationSound": false,
"hasIndirectMessages": false,
"hasTeamID": true,
"customURL": false,
"hostedOnly": false,
"webviewOptions": {
"disablewebsecurity": ""
},
"openDevTools": false
}
}通知を表示したい場合
- Franzのループ関数を用いてメッセージを取得します。取得方法はウェブサイトによって異なります
- とくに通知を表示する必要がなければgithubプラグインのままで問題ないです
- サイトにてDOMが変更されれば更新が必要です
webview.js(Backlog)
module.exports = (Franz, options) => {
function getMessages() {
var counter = 0;
counter = document.querySelector("#globalNotificationsLink > span") ? document.querySelector("#globalNotificationsLink > span").innerHTML : 0;
Franz.setBadge(counter);
}
Franz.loop(getMessages);
}webview.js(KDDI ChatWork)
module.exports = (Franz, options) => {
function getMessages() {
var counter = 0;
// default Unread
var e = document.getElementById('_chatUnreadStatus');
// ToUnread Only
// var e = document.getElementById('_chatToUnreadStatus');
if (e.style.display != 'none') {
counter += parseInt(e.innerHTML);
}
Franz.setBadge(counter);
}
Franz.loop(getMessages);
}おまけ: PNGからSVGを生成してくれるサイト
参考にさせていただいた記事
おわりに
複数のプロジェクトや業務にアサインされていると、自分宛ての通知の観測範囲が広くなります。Franzをつかうことで通知確認の一元管理ができるのでとってもおすすめです！
